<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="demo">
        账号：<input type="text" v-model.trim="userInfo.account" /> <br />
        密码：<input type="password" v-model="userInfo.password" /><br />
        年龄:<input type="number" v-model.number="userInfo.age" /><br />
        性别：男<input type="radio" v-model="userInfo.sex" value="male" /><br />
        女<input type="radio" v-model="userInfo.sex" value="female" /><br />
        爱好： 学习<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="study"
        />
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game" />
        吃好吃的<input type="checkbox" v-model="userInfo.hobby" value="eat" />
        家乡：
        <select v-model="userInfo.city">
          <option value="请选择你的城市"></option>
          <option value="北京">北京</option>
          <option value="北海">北海</option>
          <option value="桂林">桂林</option>
        </select>
        其他信息：<textarea v-model.lazy="userInfo.other"></textarea>
        <input type="checkbox" v-model="userInfo.agree" />阅读并接收协议
        <a href="https://www.baidu.com/">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            userInfo: {
              account: "",
              password: "",
              age: "",
              sex: "",
              hobby: [],
              city: "",
              other: "",
              agree: "",
            },
          };
        },
        methods: {
          demo() {
            console.log(JSON.stringify(this.userInfo));
          },
        },
        computed: {},
        watch: {},
      }).mount("#app");
    </script>
  </body>
</html>
